<template>
  <div class="contianer">
    <!-- 接口列表 -->
    <h1>接口</h1>
    <el-tree
      :data="treeAll"
      :props="defaultProps"
      @node-click="handleNodeClick"
    ></el-tree>

    <!-- 用例列表 -->
    <h1>用例</h1>
    <el-tree
      :data="caseAll"
      :props="defaultProps"
      @node-click="handleNodeCaseClick"
    >
    </el-tree>

    <!-- 表单 -->
    <div class="body" v-show="caseId != false">
      <el-form ref="form" :model="form" label-width="80px" size="medium">
        <el-form-item label="用例名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="请求地址">
          <el-input class="input-with-select" v-model="form.path">
            <el-select
              slot="prepend"
              style="width: 100px"
              v-model="form.method"
            >
              <el-option label="GET" value="get"></el-option>
              <el-option label="POST" value="post"></el-option>
              <el-option label="DELETE" value="delete"></el-option>
              <el-option label="PUT" value="put"></el-option>
            </el-select>
          </el-input>
        </el-form-item>
        <el-form-item label="重写域名">
          <el-switch v-model="form.defiend"></el-switch>
          <el-button type="primary" @click="saveCase">保存</el-button>
          <el-button type="primary" @click="clickSend" disabled>Send</el-button>
        </el-form-item>
        <el-form-item>
          <el-tabs type="border-card">
            <el-tab-pane label="请求头">
              <!-- <vue-json-editor
                v-model="form.header"
                :showBtns="false"
                :mode="'code'"
                @json-chage="onJsonChange"
                lang="zh"
                @json-save="connectTest"
              /> -->
              <el-input
                type="textarea"
                placeholder="请输入内容"
                v-model="form.header"
              >
              </el-input>
            </el-tab-pane>
            <el-tab-pane label="请求数据">
              <el-radio-group v-model="form.content_type">
                <el-radio label="params" value="params"></el-radio>
                <el-radio label="data" value="data"></el-radio>
                <el-radio label="json" value="json"></el-radio>
                <el-radio label="file" value="file" disabled></el-radio>
              </el-radio-group>
              <!-- <vue-json-editor
                v-model="form.body"
                :showBtns="false"
                :mode="'code'"
                @json-chage="onJsonChange"
                lang="zh"
                @json-save="connectTest"
                v-if="form.content_type != 'file'"
              /> -->
              <el-input
                type="textarea"
                placeholder="请输入内容"
                v-model="form.body"
              >
              </el-input>
              <!-- <el-upload
                class="upload-demo"
                drag
                action="https://jsonplaceholder.typicode.com/posts/"
                multiple
                v-else
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或<em>点击上传</em>
                </div>
                <div class="el-upload__tip" slot="tip">
                  只能上传jpg/png文件，且不超过500kb
                </div> -->
              <!-- </el-upload> -->
            </el-tab-pane>
            <el-tab-pane label="提取参数">
              <vue-json-editor
                v-model="form.extra"
                :showBtns="false"
                :mode="'code'"
                @json-chage="onJsonChange"
                lang="zh"
                @json-save="connectTest"
              />
            </el-tab-pane>
            <el-tab-pane label="后置SQL">
              <vue-json-editor
                v-model="form.backend_sql"
                :showBtns="false"
                :mode="'code'"
                @json-chage="onJsonChange"
                lang="zh"
                @json-save="connectTest"
              />
            </el-tab-pane>
            <el-tab-pane label="响应断言">
              <!-- <vue-json-editor
                v-model="form.except"
                :showBtns="false"
                :mode="'code'"
                @json-chage="onJsonChange"
                lang="zh"
                @json-save="connectTest"
              /> -->
              <el-input
                type="textarea"
                placeholder="请输入内容"
                v-model="form.expect"
              >
              </el-input>
            </el-tab-pane>
            <el-tab-pane label="响应内容" disabled>
              <small> 响应耗时: {{ time }} ms</small>
              <vue-json-editor
                v-model="form.response"
                :showBtns="false"
                :mode="'code'"
                lang="zh"
              />
            </el-tab-pane>
          </el-tabs>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import vueJsonEditor from "vue-json-editor";
import {
  projectList,
  fetchInterface,
  createCase,
  updateCase
} from "../../api/case";
import { sendApi } from "../../api/util";
export default {
  components: { vueJsonEditor },
  data() {
    return {
      // 树节点配置
      defaultProps: {
        children: "Interfaces",
        id: "id",
        label: "name",
        isLeaf: "leaf"
      },
      treeAll: [],
      caseAll: [],
      time: "未知",
      caseId: false, // 用例ID标识

      form: {
        name: "",
        path: "",
        header: null,
        method: "GET",
        defiend: false, //重写域名
        content_type: "params",
        body: null,
        extra: null,
        backend_sql: [],
        expect: null,
        response: null,
        interface_id: null
      }
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    connectTest() {},
    onJsonChange() {},

    // 获取所有项目
    getProjects() {
      projectList().then(res => {
        this.treeAll = res.data.items;
      });
    },

    // 点击接口
    handleNodeClick(data) {
      if (data.method) {
        this.caseId = null;
        // 根据接口填充请求栏
        this.form.method = data.method;
        this.form.path = data.path;
        this.form.interface_id = data.id;
        // 拉取当前接口用例列表
        this.caseAll = data.Cases;
        console.log(data);
      } else {
        this.caseId = false;
        return;
      }
    },

    // 点击用例
    handleNodeCaseClick(data) {
      this.caseId = data.id;
      this.form.name = data.name;
      this.form.content_type = data.content_type;
      this.form.backend_sql = data.backend_sql;
      this.form.body = data.body;
      this.form.extra = data.extra;
      this.form.expect = data.expect
    },

    // 发起请求
    clickSend() {
      if (this.from.defiend) {
        //  不用选择环境
        let start = new Date();
        console.log(this.from);
        sendApi(this.form).then(res => {
          this.form.response = res;
          let end = new Date();
          this.time = end - start;
          this.$notify({
            title: "Success",
            message: "请求成功",
            type: "success",
            duration: 2000
          });
        });
      } else {
        // 弹框选择环境
        // todo
      }
    },
    // 保存or更新
    saveCase() {
      console.log(this.form);
      console.log(this.caseId);
      if (this.caseId === null) {
        // 保存用例
        console.log("保存用例");
        createCase(this.form).then(res => {
          console.log(res.data);
          this.$notify({
            title: "Success",
            message: "请求成功",
            type: "success",
            duration: 2000
          });
        });
      } else if (this.caseId === false) {
        // 没选择接口
        console.log("未选择接口");
        this.$message.error("请先选择接口.");
      } else {
        this.form.id = this.caseId;
        console.log(this.form);
        updateCase(this.form).then(res => {
          console.log(res.data);
          this.$notify({
            title: "Success",
            message: "请求成功",
            type: "success",
            duration: 2000
          });
        });
      }
      // 更新case列表
      fetchInterface(this.form.interface_id).then(res => {
        console.log(res.Cases);
        this.caseAll = res.Cases;
      });
    },

    // 删除按钮
    remove(node, data) {
      console.log(node, data);
    }
  },
  created() {
    this.getProjects();
  }
};
</script>

<style lang="scss">
.jsoneditor-vue {
  margin: 10px;
  height: 400px;
}
.upload-demo {
  margin: 20px;
  text-align: center;
}

.el-button {
  // 靠右
  float: right;
  margin-left: 50px;
  margin-right: 20px;
}

.contianer {
  display: flex;
  margin: 30px auto;
  height: 687px;
  justify-content: space-around;
  .el-tree {
    width: 15%;
    border: 5px solid white;
    border-radius: 15px;
    box-shadow: 1px 1px 1px 1px #888888;
  }
  .body {
    width: 60%;
  }
}

textarea{
  width: 350px;
  height: 400px;
}
</style>
